<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./scripts/vue.js"></script>
</head>

<body>

  <pre>
    计算属性：

      1、为什么需要使用计算属性
      
      模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护
      所以，一般我们将在插值表达式中写的复杂逻辑提取到计算属性中
  </pre>

  <div id="app">
    <!-- 在使用指令的时候传递相关的参数 -->
    <div>{{ info }}</div>

    <div>{{ age === 18 ? '我成年了' : '未知' }}</div>

    <!-- 使用计算属性 -->
    <!-- 注意事项： 计算属性是一个属性，使用的时候不需要带括号 -->
    <div>{{ reverse }}</div>

    <div>{{ ageHan }}</div>
  </div>

  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        info: 'Tom',
        age: 18
      },
      methods: {},
      // 计算属性需要写到 computed 节点中
      computed: {
        // 注意： 计算属性声明的时候是一个函数
        reverse: function () {
          // 注意： 在计算属性内部，必须要有 return
          // 注意： 计算属性里面的数据依赖于 data 中的数据，当 data 中数据发生改变， 计算属性返回值也会改变
          return this.info.split('').reverse().join('')
        },
        
        ageHan: function () {
          return this.age === 18 ? '我成年了' : '未知'
        }
      }
    });
  </script>
</body>

</html>